import React, { ReactNode } from 'react'
import { useHistory } from 'react-router'
import './Breadcrumb.less'

interface IBreadCrumbProps {
  title: string
  children?: ReactNode
}

export default function BreadCrumb(props: IBreadCrumbProps) {
  const history = useHistory()

  function onBackClick() {
    history.goBack()
  }

  return (
    <div className="breadcrumb">
      <div className="icon-breadcrumb-back" onClick={onBackClick} />
      <div className="title">{props.title}</div>
      <div className="right-content">{props.children}</div>
    </div>
  )
}
